var carousel = document.querySelector('.carousel')
        var items = carousel.children
        var zhiding = document.querySelector('.zhiding')
        var zhidingItems = zhiding.children
        var prev = document.querySelector('.prev')
        var next = document.querySelector('.next')
        var banner = document.querySelector('.banner-img')

        
        var index = 0
        next.addEventListener('click', function () {
            items[index].className = ''
            zhidingItems[index].className = ''
            if (index == items.length - 1) {
                index = -1
            }
            index++
            items[index].className = 'active'
            zhidingItems[index].className = 'active'
        })
        let n = setInterval(function () {
            next.click()
        }, 2000)

        banner.addEventListener('mouseenter',function(){
            clearInterval(n)
        })

        banner.addEventListener('mouseleave',function(){
            n = setInterval(function () {
            next.click()
        }, 2000)
        })


        prev.addEventListener('click', function () {
            items[index].className = ''
            zhidingItems[index].className = ''
            if (index == 0) {
                index = items.length
            }
            index--
            items[index].className = 'active'
            zhidingItems[index].className = 'active'
        })